<template>
    <div class="address-list-container">
        <div class="search">
            <Search />
        </div>

        <div class="friend-list">
            <details open>
                <summary>联系人 <span class="total">{{ friendList.length }}</span></summary>
                <a-list class="a-list" item-layout="horizontal" :data-source="friendList">
                    <template #renderItem="{ item }">
                        <a-list-item style="border-bottom-width: 0;">
                            <a-list-item-meta>
                                <template #title>
                                    <span style="position: relative; top: 6px; font-size: 14px;">{{ item.other_user_nickname }}</span>
                                </template>
                                <template #avatar>
                                    <a-avatar shape="square" :src="baseURL + item.other_user_avatar" />
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </details>
        </div>
    </div>
</template>

<script setup>
import Search from '@/views/main/component/Search.vue'
import { ref, onMounted, watchEffect, inject } from 'vue';
import { FriendShipList_API } from '@/api/friendship.js'
import { useStatusStore } from '@/pinia/useStatusStore.js'

const baseURL = import.meta.env.VITE_API_BASE_URL
const statusStore = useStatusStore()
const socket = inject('socket')

const friendList = ref([])

const friendshipList = async () => {
    const { data: res } = await FriendShipList_API(1)
    friendList.value = res.data
}

watchEffect(() => {
    if (statusStore.process_status) {
        friendshipList()
        statusStore.process_status = false
    }
})

onMounted(() => {
    friendshipList()
    socket.on('friendship update notification', () => {
        friendshipList()
    })
})
</script>

<style lang="less" scoped>

.address-list-container:hover {
    scrollbar-width: none;
}

.address-list-container {
    overflow-y: scroll;
    scrollbar-width: none;
    user-select: none;
    border-right: 1px solid #e0e0e0;

    .search {
        width: 100%;
        height: 80px;
        background-color: #F7F7F7;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .friend-list {
        width: 100%;
        height: 100%;
        padding: 20px;
        summary {
            color: #161616;
            font-size: 14px;
            position: relative;
            .total {
                color: #999;
                font-size: 12px;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
        .a-list {
            border-bottom: 1px solid #e0e0e0;
        }
    }
}
</style>
